@*Hdip Project 2013-14, Student Name:- Chris Pembroke,  Student Number:- x00115839*@
@{
    ViewBag.Title = "About";
}

<style>
    #homeAboutContainer {
        margin-left: auto;
        margin-right: auto;
        margin-top: 80px;
        margin-bottom: auto;
        width: 600px;
        height: 600px;
        /*background-color: #FFFFFF;*/
    }

    #homeAboutDiv1 {
        margin: auto;
        background-color: #eeeeee;
        font-family: Verdana;
        width: 600px;
        height: 100px;
        padding: 10px;
    }

    #homeAboutDiv2 {
        margin-top: 40px;
        margin-left: 130px;
        float: left;
        background-color: yellowgreen;
        /*border-radius: 150px;*/
        width: 150px;
        height: 150px;
        padding: 10px;
    }

    #homeAboutDiv3 {
        margin-top: 200px;
        margin-right: 70px;
        float: right;
        background-color: coral;
        /*border-radius: 250px;*/
        width: 250px;
        height: 250px;
    }

    #infos {
        text-align: center;
        color: red;
    }

    #aboutActions, #aboutItems {
        text-align: center;
    }
</style>

<div id="homeAboutContainer">

    <div id="homeAboutDiv1">
        <h5>You Can</h5>
        <h3 id="infos"></h3>
    </div>

    <div id="homeAboutDiv2">
        <h5>We Can</h5>
        <br />
        <h4 id="aboutActions">Adjust</h4>
    </div>

    <div id="homeAboutDiv3">
        <br />
        <br />
        <br />
        <br />
        <br/>
        <h4 id="aboutItems">Front Brake</h4>
    </div>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <link rel="stylesheet" href="@Url.Content("~/Content/customised.css")" />

    <script>
        var i, j, infos, infoMessages, actions, aboutactions, items, aboutitems;

        function rotate() {
            infos.innerHTML = infoMessages[i];
            actions.innerHTML = aboutactions[i];
            items.innerHTML = aboutitems[i];
            (i === (infoMessages.length - 1)) ? (i = 0) : (i++);
            setTimeout(rotate, 2000);
        }

        function init() {
            infos = document.getElementById("infos");
            infoMessages = ["Register and create a bike service account!", "Login!", "Record each of your bike details!", "Book a bike service quote!", "Book a bike service!", "View a bike's service history!", "Pay online by paypal!"]
            actions = document.getElementById("aboutActions");
            items = document.getElementById("aboutItems");
            aboutactions = ["Change", "Change", "Adjust", "Adjust", "Replace", "Replace", "Adjust"]
            aboutitems = ["Brake Cable", "Tyre", "Front Derailleur", "Saddle", "Bottom Bracket", "Tube", "Rear Derailleur" ]
            i = 0;
            rotate();           
        }
        document.addEventListener("DOMContentLoaded", init, false);

    </script>

}







